<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <!-- import CSS -->
    <!-- <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    /> -->
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <link rel="stylesheet" type="text/css" href="./css/element-ui-index.css" />
  </head>

  <body>
    <div id="app">
      <el-form
        :model="dynamicValidateForm"
        ref="dynamicValidateForm"
        label-width="100px"
        class="demo-dynamic"
      >
        <!-- <el-form-item
          prop="email"
          label="邮箱"
          :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ]"
        >
          <el-input v-model="dynamicValidateForm.email"></el-input>
        </el-form-item> -->

        <el-form-item
          v-for="(domain, index) in dynamicValidateForm.domains"
          :label="'域名' + index"
          :key="domain.index"
          :prop="'domains.' + index + '.value'"
          :rules="{
            required: true, message: '域名不能为空', trigger: 'blur'
          }"
        >
          <!-- V-model 绑定为数组 -->
          <el-input v-model="domain.value"></el-input
          ><el-button @click.prevent="removeDomain(domain)">删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('dynamicValidateForm')"
            >提交</el-button
          >
          <el-button @click="addDomain">新增域名</el-button>
          <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
        </el-form-item>
        <el-row>
          <el-form-item
            v-for="(selectItem, indexSelect) in dynamicValidateForm.select"
            :label="'选择器' + indexSelect"
            :key="selectItem.indexSelect"
            :prop="'select.' + indexSelect + '.value'"
            :rules="{
            required: true, message: '域名不能为空', trigger: 'blur'
          }"
          >
            <el-select v-model="selectItem.value">
              <el-option
                v-for="(item,indexOption) in selectItem.option"
                :value="item.value"
                :label="item.label"
                :key="indexOption"
              ></el-option>
            </el-select>
            <el-button @click="selectAdd">测试选择器增加</el-button>
            <el-button @click="selectReset('select.' + indexSelect + '.value')"
              >测试选择器重置</el-button
            >
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="js/vue.js"></script>
  <!-- import JavaScript -->
  <script src="js/element-ui-lib-index.js"></script>
  <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          dynamicValidateForm: {
            domains: [
              {
                value: "",
              },
            ],
            email: "",
            selectRule: [
              {
                value: "",
              },
            ],
            select: [
              {
                value: "",
                option: [
                  { value: "a", label: "3" },
                  { value: "b", label: "2" },
                  { value: "c", label: "1" },
                ],
              },
            ],
          },
        };
      },
      methods: {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert("submit!");
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        },
        // 选择器重置
        selectRese() {},
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        removeDomain(item) {
          var index = this.dynamicValidateForm.domains.indexOf(item);
          if (index !== -1) {
            this.dynamicValidateForm.domains.splice(index, 1);
          }
        },
        addDomain() {
          const m = this.dynamicValidateForm.domains;
          this.dynamicValidateForm.domains.push({});
        },
        selectAdd() {
          const addItemSelect = this.dynamicValidateForm.select.option;
          const option = [
            { value: "a", label: "3" },
            { value: "b", label: "2" },
            { value: "c", label: "1" },
          ];
          this.dynamicValidateForm.select.push({
            option,
          });
        },
      },
    });
  </script>
</html>
<!-- 数组遍历出来 要使得V-model的值同时改变需要V-model绑定为一个动态数组数组的 -->
